<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        list-style: none;
      }

      .slider {
        position: relative;
        width: 100vw;
        height: 47.4667vw;
        background-color: #aaa;
        overflow: hidden;
      }

      .slider ul {
        display: inline-flex;
        transition: all 0.5s;
      }

      .slider img {
        display: block;
        width: 100vw;
        height: 47.4667vw;
      }

      ol {
        display: flex;
        position: absolute;
        left: 50%;
        bottom: 2.6667vw;
        transform: translateX(-50%);
      }

      ol li {
        width: 2.1333vw;
        height: 2.1333vw;
        background-color: rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        margin: 1.0667vw;
      }

      .active {
        background-color: #fff;
      }
    </style>
  </head>

  <body>
    <div class="slider">
      <ul class="slider-wrap">
        <li><img src="img/01.jpg" alt="" /></li>
        <li><img src="img/02.jpg" alt="" /></li>
        <li><img src="img/03.jpg" alt="" /></li>
        <li><img src="img/04.jpg" alt="" /></li>
        <li><img src="img/05.jpg" alt="" /></li>
      </ul>
      <ol></ol>
    </div>

    <script>
      //  自动播放
      // PC端  封装animate函数   改变元素（绝对定位）偏移值
      // 移动端  transform： traslateX +  过渡
      var slideWrap = document.querySelector(".slider-wrap");

      // 单张图片的大小
      var width = slideWrap.children[0].offsetWidth;
      //  图片的数量
      var imgNum = slideWrap.children.length;

      // 小圆点的容器
      var indicatorWrap = document.querySelector("ol");

      // 记录当前播放到了哪一张图片
      var currentIndex = 0;

      var intervalTime = 2000;
      // 动态的生成小圆点
      for (var i = 0; i < imgNum; i++) {
        var li = document.createElement("li");
        indicatorWrap.appendChild(li);
      }

      //
      function indicatorActive() {
        // 先把所有的小圆点 active类名去掉
        for (var i = 0; i < imgNum; i++) {
          indicatorWrap.children[i].classList.remove("active");
        }
        indicatorWrap.children[currentIndex].classList.add("active");
      }

      indicatorActive();

      function slide() {
        indicatorActive();
        slideWrap.style.transform =
          "translateX(-" + width * currentIndex + "px)";
        if (currentIndex < imgNum - 1) {
          currentIndex++;
        } else {
          currentIndex = 0;
        }
      }

      // 实现自动轮播的效果
      var timer = setInterval(slide, intervalTime);

      // 滑动切换图片的效果
      var X = 0; // 记录 touchstart 手指刚放上去的X 坐标

      slideWrap.addEventListener("touchstart", function (e) {
        console.log("start");

        // 触摸开始时 我们记录下用户手指的坐标值
        X = e.targetTouches[0].pageX;

        // 开始触摸时 就清除定时器 停止自动播放
        clearInterval(timer);
      });

      slideWrap.addEventListener("touchmove", function (e) {
        console.log("move");
        // 当用户触摸移动时, 我们让slideWrap跟着用户的手指移动的位置进行平移, 从而产生一种图片被用户滑动的视觉效果
        slideWrap.style.transform =
          "translateX(" +
          (-currentIndex * width + e.targetTouches[0].pageX - X) +
          "px)";
      });

      
      // 如果发现 用户 停止touch之后 图片移动的位置 超过了图片宽度的1/3 我们就认定 用户想翻到下一张图
      slideWrap.addEventListener("touchend", function (e) {
        // 通过touch结束和touch开始时坐标的差值来计算出 此次滑动移动图片的距离
        var distance = e.changedTouches[0].pageX - X;
        console.log(distance);

        // 再根据用户滑动的距离 来判断下 是否向下或者向上切换图片
        // 从右往左的滑动
        if (distance < -width / 3) {
          currentIndex++;
        } else if (distance > width / 3) {
          currentIndex--;
        }

        // 为了防止超过最大图片的数量 我们要对currentIndex进行边缘的判断
        currentIndex = currentIndex >= imgNum ? imgNum - 1 : currentIndex;
        currentIndex = currentIndex < 0 ? 0 : currentIndex;

        // 让小圆点的选中效果跟着最新的currentIndex进行更新
        indicatorActive();

        // 最后根据最新的currentIndex的值，我们决定slideWrap移动的距离
        slideWrap.style.transform =
          "translateX(-" + currentIndex * width + "px)";

        // 触摸结束后 我们让定时器重新运行,开始自动轮播效果
        timer = setInterval(slide, intervalTime);
      });


      // var sliderWrap = document.querySelector('.slider-wrap');
      // var width = sliderWrap.children[0].offsetWidth; // 获取单张图片的宽度
      // var num = sliderWrap.children.length; // 获取图片的总数量
      // var ol = document.querySelector('ol'); // 获取下面小圆点的容器

      // var current = 0; //当前播放到的图片对应的索引值

      // var X = 0; // 获取下touchstart时， 手指的初始X坐标值

      // // 开启定时器，每隔1s种切换下图片
      // var timer = setInterval(slide, 1000);

      // // 动态生成ol中的li
      // for (var i = 0; i < num; i++) {
      //     var li = document.createElement('li');
      //     ol.appendChild(li);
      // }
      // // 实现li的选中效果
      // liActive();

      // // 定时器中 改变图片的效果
      // function slide() {
      //     // 检测一下，看看当前播放的图片current有没有超过图片的最大数量
      //     if (current < num - 1)
      //         current++;
      //     else
      //         current = 0;
      //     liActive();
      //     // 通过设置图片容器的 平移效果 + transition过渡，实现了平移动画效果
      //     sliderWrap.style.transform = 'translateX(' + (-current * width) + 'px)';
      // }

      // // li的选中效果
      // function liActive() {
      //     for (var i = 0; i < num; i++) {
      //         ol.children[i].classList.remove('active');
      //     }
      //     ol.children[current].classList.add('active');
      // }

      // // 触摸开始事件
      // sliderWrap.addEventListener('touchstart', function(e) {
      //     // 用户开始触摸时，我们就让定时器停掉
      //     clearInterval(timer);
      //     // 同时记录一下，用户开始触摸时，手指的X坐标值
      //     X = e.targetTouches[0].pageX;
      // })

      // // 触摸移动事件
      // // 做出用户滑动图片的效果
      // sliderWrap.addEventListener('touchmove', function(e) {
      //     e.preventDefault() //因为滑动手指的时候，默认有一个屏幕滚动的效果，为避免不必要的影响，我们把事件默认行为阻止。
      //         // 触摸移动时，我们就不断的计算用户当前手指移动的距离
      //     var moveX = e.targetTouches[0].pageX - X;
      //     // 然后把 手指移动的距离 和 图片容器的位移 进行计算，作为图片容器移动的位移，这样就可以做出用户手指移动图片的效果了
      //     sliderWrap.style.transform = 'translateX(' + (-(current * width - moveX)) + 'px)';
      // })

      // // 触摸结束事件
      // // 当用户触摸结束之后，我们判断一下，看用户总共移动了多长的距离。
      // // 如果用户移动的距离超过了图片宽度的1/3，那么我们就决定图片是否切换到上一张和下一张
      // sliderWrap.addEventListener('touchend', function(e) {

      //     // 用户触摸结束，重新开启定时器
      //     timer = setInterval(slide, 1000);

      //     // 通过触摸结束时，触摸的坐标  -  触摸开始时的坐标，就可以计算出从从触摸开始到触摸结束整个的移动距离
      //     var moveX = e.changedTouches[0].pageX - X;
      //     // 如果发现 移动的距离 大于 图片的三分之一， 切换到上一张图
      //     if (moveX > width / 3 && current > 0) {
      //         current--

      //         // 如果发现 移动的距离 小于 图片的负的三分之一， 切换到下一张图
      //     } else if (moveX < -width / 3 && current < num - 1) {
      //         current++
      //     }
      //     // 执行图片的移动效果
      //     sliderWrap.style.transform = 'translateX(' + (-current * width) + 'px)';
      //     liActive();
      // })
    </script>
  </body>
</html>
